<template>
  <base-container>
    <el-radio-group v-model="radioValue" size="large" @change="handleRadio">
      <el-radio-button v-for="item in radioOptions" :key="item.value" v-bind="item" />
    </el-radio-group>
    <section class="mt-20px">
      <avue-table-search
        v-model="searchParams"
        :option="searchOption"
        @search-change="loadTableSearch"
        @search-reset="loadTableSearchReset"
      />
      <!-- 卡片容器 -->
      <base-table-card>
        <avue-crud
          v-model="formData"
          :data="tableData"
          :option="tableOption"
          :page="page"
          :table-loading="tableLoading"
          @refresh-change="loadGetTableData"
          @current-change="loadTablePageChange"
          @size-change="loadTablePageSizeChange"
          @row-save="loadAdd"
          @row-update="loadEdit"
        >
          <template #menu>
            <el-button text type="primary"> 账户明细</el-button>
            <el-button text type="primary">线下转账入账</el-button>
            <el-dropdown>
              <el-button type="primary" text>
                <span class="px-5px">更多</span>
                <i class="iconfont ic-xiajiantou1"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="item in dropdownMenuOptions"
                    :key="item.value"
                    @click="handleDropdownItem(item.value)"
                    >{{ item.label }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </avue-crud>
      </base-table-card>
      <base-dialog v-model="isShowRentCharge" title="租金充值" width="40%">
        <div>
          <avue-table-search v-model="rentChargeParams" :option="rentChargeOptions" />
        </div>
      </base-dialog>
    </section>
  </base-container>
</template>
<script setup>
  import useCrudHook from "avue-table/useCrudHook";

  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: searchParams,
    form: formData,
    get: loadGetTableData,
    add: loadAdd,
    edit: loadEdit,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.customer.GetCustomerPage,
    search: { status: "01" },
    getParamsFormat: params => {
      // 开通时间
      if (params.createTime && params.createTime.length === 2) {
        params.createTimeStart = params.createTime[0];
        params.createTimeEnd = params.createTime[1];
        delete params.createTime;
      }
      // 到期时间
      if (params.expiredTime && params.expiredTime.length === 2) {
        params.expiredTimeStart = params.expiredTime[0];
        params.expiredTimeEnd = params.expiredTime[1];
        delete params.expiredTime;
      }
      // console.log(params, "params");
      // 返回查询参数
      return params;
    },
    add: Api.customer.AddCustomer,
    edit: Api.customer.UpdateCustomer,
  });
  // 租金充值参数
  const rentChargeParams = ref({
    keyword: "11",
  });

  // 下拉菜单选项
  const dropdownMenuOptions = ref([
    {
      label: "租金充值",
      value: "1",
    },
  ]);
  //单选按钮选项
  const radioOptions = ref([
    { label: "商家账户列表", value: "1" },
    { label: "账户余额流水", value: "2" },
  ]);
  //单选按钮切换值
  const radioValue = ref("1");
  // 租金充值显示
  const isShowRentCharge = ref(false);
  // 点击切换
  const handleRadio = value => {
    console.log(value);
  };
  // 点击下拉菜单
  const handleDropdownItem = value => {
    if (value === "1") {
      console.log("租金充值");
      isShowRentCharge.value = !isShowRentCharge.value;
      return false;
    }
  };
  // 挂载时加载数据
  onMounted(() => {
    loadGetTableData();
  });
</script>
